<template>
	<view class="container">
		<!-- 消息列表 -->
		<scroll-view scroll-y class="message-list">
			<view class="message-item card" v-for="(item, index) in messageList" :key="index" @click="openChat(item)">
				<view class="avatar-container">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="badge" v-if="item.unread">{{item.unread > 99 ? '99+' : item.unread}}</view>
				</view>
				<view class="content">
					<view class="header">
						<text class="name">{{item.name}}</text>
						<text class="time text-muted">{{item.time}}</text>
					</view>
					<view class="preview-container">
						<text class="preview text-ellipsis">{{item.lastMessage}}</text>
						<view class="status-indicator" v-if="item.status === 'typing'">对方正在输入...</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="messageList.length === 0">
				<image src="/static/images/empty-message.png" mode="aspectFit"></image>
				<text>暂无消息</text>
				<text class="sub-text">你的消息将显示在这里</text>
			</view>
		</scroll-view>
		
		<!-- 悬浮按钮 -->
		<!-- <view class="fab-button">
			<uni-icons type="chat" size="24" color="#ffffff"></uni-icons>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			messageList: [
				{
					id: 1,
					name: '系统通知',
					avatar: '/static/images/system-notice.png',
					lastMessage: '您有一个新的课程提醒',
					time: '10:30',
					unread: 2,
					status: 'read'
				},
				// {
				// 	id: 2,
				// 	name: '小美',
				// 	avatar: '/static/images/xiaomei.png',
				// 	lastMessage: '好的，我知道了',
				// 	time: '昨天',
				// 	unread: 0,
				// 	status: 'typing'
				// },
				// {
				// 	id: 3,
				// 	name: '小帅',
				// 	avatar: '/static/images/xiaoshuai.png',
				// 	lastMessage: '请问这道题怎么做？',
				// 	time: '昨天',
				// 	unread: 0,
				// 	status: 'read'
				// }
			]
		}
	},
	methods: {
		openChat(item) {
			uni.navigateTo({
				url: `/pages/message/detail?id=${item.id}`
			})
		},
		handleNav(type) {
			switch(type) {
				case 'study':
					uni.switchTab({
						url: '/pages/index/index'
					})
					break
				case 'discover':
					uni.switchTab({
						url: '/pages/medical-circle/index'
					})
					break
				case 'ai':
					uni.switchTab({
						url: '/pages/ai/index'
					})
					break
				case 'message':
					// 当前页面
					break
				case 'mine':
					uni.switchTab({
						url: '/pages/personal/index'
					})
					break
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	// background-color: #ebf5fb;
	display: flex;
	flex-direction: column;
	position: relative;
}

.message-list {
	flex: 1;
}

.message-item {
	display: flex;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	
	&:active {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 25rpx rgba(52, 152, 219, 0.15);
	}
}

.avatar-container {
	position: relative;
	margin-right: 20rpx;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	border: 4rpx solid #ebf5fb;
}

.badge {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	min-width: 36rpx;
	height: 36rpx;
	line-height: 36rpx;
	border-radius: 18rpx;
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	color: #fff;
	font-size: 22rpx;
	text-align: center;
	padding: 0 8rpx;
	box-shadow: 0 4rpx 8rpx rgba(52, 152, 219, 0.3);
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.name {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.time {
	font-size: 24rpx;
}

.preview-container {
	display: flex;
	flex-direction: column;
}

.preview {
	font-size: 28rpx;
	color: #666;
	width: 450rpx;
}

.status-indicator {
	font-size: 24rpx;
	color: #3498db;
	margin-top: 6rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-state image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
	opacity: 0.5;
}

.empty-state text {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.empty-state .sub-text {
	font-size: 24rpx;
	color: #a5b1c2;
}

.fab-button {
	position: fixed;
	right: 40rpx;
	bottom: 120rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6rpx 20rpx rgba(52, 152, 219, 0.4);
	transition: all 0.3s ease;
	z-index: 100;
	
	&:active {
		transform: translateY(3rpx);
		box-shadow: 0 4rpx 12rpx rgba(52, 152, 219, 0.3);
	}
}

.fab-button .iconfont {
	font-size: 48rpx;
}
</style> 